﻿
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/plugins/treeview/bootstrap-treeview.css" rel="stylesheet" />
<script src="~/Scripts/plugins/treeview/bootstrap-treeview.js"></script>
<link href="~/Content/plugins/iCheck/custom.css" rel="stylesheet" />
<link href="~/Content/plugins/steps/jquery.steps.css" rel="stylesheet" />
<body class="gray-bg">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>带验证的表单向导</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="#">选项1</a>
                            </li>
                            <li>
                                <a href="#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <h2>
                        页面配置
                    </h2>
                    <form id="form" action="#" class="wizard-big">
                        <h1>添加功能</h1>
                        <fieldset>
                            <h2>账户信息</h2>
                            <div class="row">
                                <div class="col-sm-8">
                                    <div style="display:block;float:left;width:50%">
                                        <label>上级 *</label>
                                        <select id="ParentId" class="form-control m-b" name="account">
                                            <option value="0">系统功能</option>
                                        </select>
                                        <label>资源类型 *</label>
                                        <select id="ResourcesType" class="form-control m-b" name="account">
                                            <option value="Menu">页面</option>
                                        </select>
                                    </div>
                                    <div style="display:block;float:left ;width:50%;">
                                        <label>资源名称 *</label>
                                        <input id="PermissionName" name="PermissionName" type="text" class="form-control required">
                                        <label>资源路径 *</label>
                                        <input id="ResourcesUrl" name="ResourcesUrl" type="text" class="form-control required">
                                        <label>排序 *</label>
                                        <input id="Sorting" name="Sorting" type="text" class="form-control required">
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="text-center">
                                        <div style="margin-top: 20px">
                                            <i class="fa fa-sign-in" style="font-size: 180px;color: #e5e5e5 "></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>

    </div>
</body>
<script src="~/Scripts/plugins/staps/jquery.steps.min.js"></script>
<script src="~/Scripts/plugins/validate/jquery.validate.min.js"></script>
<script src="~/Scripts/plugins/validate/messages_zh.min.js"></script>
<script>
    $(document).ready(function () { $("#wizard").steps(); $("#form").steps({ bodyTag: "fieldset", onStepChanging: function (event, currentIndex, newIndex) { if (currentIndex > newIndex) { return true } if (newIndex === 3 && Number($("#age").val()) < 18) { return false } var form = $(this); if (currentIndex < newIndex) { $(".body:eq(" + newIndex + ") label.error", form).remove(); $(".body:eq(" + newIndex + ") .error", form).removeClass("error") } form.validate().settings.ignore = ":disabled,:hidden"; return form.valid() }, onStepChanged: function (event, currentIndex, priorIndex) { if (currentIndex === 2 && Number($("#age").val()) >= 18) { $(this).steps("next") } if (currentIndex === 2 && priorIndex === 3) { $(this).steps("previous") } }, onFinishing: function (event, currentIndex) { var form = $(this); form.validate().settings.ignore = ":disabled"; return form.valid() }, onFinished: function (event, currentIndex) { var form = $(this); form.submit() } }).validate({ errorPlacement: function (error, element) { element.before(error) }, rules: { confirm: { equalTo: "#password" } } }) });
</script>

